<template>
  <div class="duty-record-wrap">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
      <el-form-item v-if="$store.state.userinfo.isMuilUnitUser === 1">
        <el-select filterable v-model="searchForm.orgIds" @change="getData(1)" placeholder="请选择业主单位">
          <el-option label="全部业主单位" :value="$store.state.userinfo.organizationIds"></el-option>
          <el-option
            v-for="item in orgOptions"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="查岗开始日期"
          end-placeholder="查岗结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="utils.intTimePickerOptions()"
          @change="getData(1)">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select filterable @change="getData(1)" v-model="searchForm.initiatorAccount" placeholder="请选择查岗人">
          <el-option label="全部查岗人" value=""></el-option>
          <el-option
            v-for="item in personnelOptions"
            :key="item.accountName"
            :label="item.name"
            :value="item.accountName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select filterable @change="getData(1)" v-model="searchForm.byCheckAccount" placeholder="请选择应答人员">
          <el-option label="全部应答人员" value=""></el-option>
          <el-option
            v-for="item in personnelOptions"
            :key="item.accountName"
            :label="item.name"
            :value="item.accountName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="form-search-btn" type="primary" @click="getData(1)">查询</el-button>
        <!-- <el-button type="primary" @click="addPlan">查岗</el-button> -->
      </el-form-item>
    </el-form>
    <el-row class="overview-wrap"  :gutter="40">
      <span style="display:none;">{{freashStaticFlag}}</span>
      <el-col :span="6">
        <div class="item-wrap">
          <p class="item-value color-2">{{ staticObj.total || 0 }}</p>
          <p class="item-title">查岗总人次</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item-wrap">
          <p class="item-value color-4">{{ (staticObj.replyTotal -  staticObj.nolatTotal) || 0 }}</p>
          <p class="item-title">上传定位成功的应答人次</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item-wrap">
          <p class="item-value color-4">{{ staticObj.nolatTotal || 0 }}</p>
          <p class="item-title">未上传定位总人次</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item-wrap">
          <p class="item-value color-4">{{ staticObj.noreplyTotal || 0 }}</p>
          <p class="item-title">未应答总人次</p>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      ref="dutyRecordTableList"
      :data="tableData"
      style="width: 100%">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="查岗时间" prop="initiateTime"></el-table-column>
      <el-table-column label="查岗人" prop="initiatorName"></el-table-column>
      <el-table-column label="上传定位成功的应答人员" align="center">
        <el-table-column
          prop="onDutyCount"
          label="人数">
        </el-table-column>
        <el-table-column label="人员明细">
          <template slot-scope="scope">
            <el-link v-for="(item,index) in scope.row.onDutyPerson" :key="index" @click="showPositionDialog(index,scope.row)">{{index!=0?'、':''}}{{item.byCheckName}}</el-link>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="未上传定位的应答人员" align="center">
        <el-table-column
          prop="noLocationCount"
          label="人数">
        </el-table-column>
        <el-table-column label="人员明细">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.noLocationPerson" :key="index">{{index!=0?'、':''}}{{item.byCheckName}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="未应答人员" align="center">
        <el-table-column
          prop="offDutyCount"
          label="人数">
        </el-table-column>
        <el-table-column label="人员明细">
          <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.offDutyPerson" :key="index">{{index!=0?'、':''}}{{item.byCheckName}}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
      </el-pagination>
      <el-dialog
        :close-on-click-modal="false"
        title="创建查岗任务"
        width="600px"
        top='10vh'
        v-if="dialogFalg"
        :visible.sync="dialogFalg"
        @close="closeDialog"
        v-dialogDrag>
        <edit-form :editInfo="editInfo" :closeDialog="closeDialog"></edit-form>
      </el-dialog>
      <el-dialog
        :close-on-click-modal="false"
        title="人员定位"
        width="600px"
        top='10vh'
        v-if="positionDialogFalg"
        :visible.sync="positionDialogFalg"
        @close="closePositionDialog"
        v-dialogDrag>
        <p-form :pisionInfo="pisionInfo"></p-form>
      </el-dialog>
  </div>
</template>

<script>
import utils from '@/utils/util'
import { getOrgList } from '@/api/org'
import {getUsers} from '@/api/api'
import * as Dao from '@/api/watch'
import pForm from '../Common/DutyPersonPosition'
import editForm from './Dialog/SuperviseForm'

export default {
  name: 'Supervise',
  props:['param'],
  components: { 
    pForm,
    editForm
  },
  data () {
    return {
      loading: false,
      freashStaticFlag:0,
      utils: utils,
      orgOptions: [], // 业主单位下拉框数据
      personnelOptions: [], // 值班人员下拉框数据
      searchForm: {
        orgIds: '',
        time: '', // 时间
        initiatorAccount: '', // 发起人账号
        byCheckAccount: '', // 被查人账号
      },
      // 统计
      staticObj: {},
      // 列表
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogFalg:false,
      editInfo: {},// 编辑对应的表单信息
      positionDialogFalg: false,
      pisionInfo:{}//人员定位
    }
  },
  created:function() {
    let that = this
    // 绑定下拉框
    if(this.$store.state.userinfo.isMuilUnitUser === 1) {
      getOrgList({queryType: 0}).then(res => {
        that.orgOptions = res.data
        //that.searchForm.orgIds = res.data[0].organizationId
      })
      that.searchForm.orgIds = that.$store.state.userinfo.organizationIds
    }
    // 获取班次
    // 获取用户列表
    that.getPersonnelOptions()
    that.getData()
  },
  methods: {
    getData(_pageIndex){
      this.getList(_pageIndex)    
      this.getStatis() 
    },
    // 获取值班人员下拉框数据
    getPersonnelOptions() {
      let that = this
      getUsers({
        queryType: 0
      }).then(res => {
        this.personnelOptions.push.apply(this.personnelOptions,res.data);
      })
    },
    // 获取列表数据
    getList (pageIndex, pageSize) {
      let that = this
      that.loading = true
      if (pageIndex) {
        that.currentPage = pageIndex
      }
      if (pageSize) {
        that.pageSize = pageSize
      }
      let parames = {
        orgIds: that.searchForm.orgIds || that.$store.state.userinfo.organizationIds,
        startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' :'',
        endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' :'',
        initiatorAccount: that.searchForm.initiatorAccount,
        byCheckAccount: that.searchForm.byCheckAccount,
        pageSize: that.pageSize,
        pageIndex: that.currentPage - 1
      }
      Dao.getRecordsInspectForPc(parames).then(res => {
        that.tableData = res.data
        that.total = res.total
        that.loading = false
      })      
    },
    getStatis() {//头部统计
      let that = this
      //this.staticObj = {}
      Dao.getInspectCountForPc({
        orgIds: that.searchForm.orgIds || that.$store.state.userinfo.organizationIds,
        startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' :'',
        endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' :'',
        initiatorAccount: that.searchForm.initiatorAccount,
        byCheckAccount: that.searchForm.byCheckAccount,
      }).then((result) => {
          $.extend(that.staticObj,result.data) 
          that.freashStaticFlag++
      })
    },
    handleSizeChange(pageSize) {
      this.getList(1, pageSize)
    },
    handleCurrentChange(currentPage) {
      this.getList(currentPage)
    },
    //查岗
    addPlan(index, row) {
      this.dialogFalg = true
      this.editInfo = row||{}
    },
    closeDialog(refresh) {
      this.dialogFalg = false
      if(refresh) {
        this.getData(1)
      }
    },
    //定位
    showPositionDialog(index, row) {
      this.positionDialogFalg = true
      this.pisionInfo = row||{}
    },
    closePositionDialog(refresh) {
      this.positionDialogFalg = false
    },
  },
}
</script>